<template>
  <div>
    <headerXX :name="title"></headerXX>
    <van-pull-refresh class="pull-refresh" v-model="refreshing" @refresh="onRefresh">
      <van-empty v-if="goodList.length == 0 && !error" image="search" description="未找到数据" />
      <van-empty v-if="error" image="error" description="网络错误" />
      <van-list
        :immediate-check="false"
        :loading="loading"
        :finished="finished"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
        finished-text="没有更多了"
        @load="queryList"
      >
        <div class="ulbox">
          <div class="ul" v-for="(item, index) in goodList" :key="index">
            <div class="li">
              <div class="li_head">
                <div class="li_left">
                  <img :src="item.goodImage" mode="" />
                </div>
                <div class="li_right">
                  <div>
                    <div class="TT">
                      {{ item.goodName }}
                    </div>
                    <div
                      style="
                        font-size: 12px;
                        color: #353535;
                        margin: 4px 0;
                        display: flex;
                        align-items: center;
                      "
                    >
                      <van-icon name="coupon-fill" color="#e6e6e6" size="18"></van-icon>设备介绍
                    </div>
                    <div class="JJ">
                      {{ item.goodDescription }}
                    </div>
                  </div>
                </div>
              </div>
              <van-divider :style="{ color: '#979797', padding: '0px', margin: '0px' }" />
              <div class="li_foot">
                <div
                  style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    font-size: 10px;
                  "
                >
                  <div v-if="item.goodRemainQty >= 1" class="li_right_btn" @click="YYXX(item)">
                    领用
                  </div>
                  <div
                    class="li_right_btn"
                    style="color: #808080; border: #808080 1px solid"
                    v-else
                  >
                    暂无
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <template #error>
          <div class="error-tip" @click="retryLoad">
            <van-icon name="warning" />
            <span>加载失败，点击重试</span>
          </div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getToolList } from "@/api/realAssets/icsharedstation/JBJJ_JKZC_GXGJ_SHFS/index.js"
import { getAccessToken } from "../../common/YYSLxx.js"
import moment from "moment"
import headerXX from "../../components/title.vue"
import { testUserMessage } from "../../common/testUser.js"
export default {
  components: {
    headerXX
  },
  data () {
    return {
      pageData: {
        pageNumber: 1,
        pageSize: 10
      },
      title:"基本急救",
      dataInfo: {},
      siteData: {},
      goodList: [],
      loading: false,
      finished: false,
      refreshing: false,
      error: false // 控制错误状态
    }
  },
  methods: {
    queryList () {
      this.loading = true
      if (this.error) return // 如果当前是错误状态，不自动触发加载
      if (this.refreshing) {
        this.goodList = []
      }
      getToolList({
        siteId: this.siteData.id,
        pageNumber: this.pageData.pageNumber,
        pageSize: this.pageData.pageSize
      })
        .then((res) => {
          if (res.resultMessage != "SUCCESS") {
            this.goodList = []
            this.error = true // 显示错误提示
          } else if (res.data.length == 0) {
            this.goodList = []
            this.finished = true
          } else {
            let dataList = res.data.map((item) => {
              return {
                id: item.id,
                goodId: item.id,
                goodName: item.toolName,
                goodImage: item.toolImage,
                goodSumQty: item.toolSum,
                goodRemainQty: item.toolRemain,
                goodSiteId: item.siteId,
                goodDescription: item.toolDescription,
                remark: item.remark
              }
            })
            this.goodList = [...this.goodList, ...dataList]
          }
          this.loading = false
          // 判断是否已加载完所有数据
          if (this.goodList.length == res.pageNum) {
            this.finished = true
          } else {
            this.pageData.pageNumber++
          }
          this.refreshing = false
        })
        .catch((err) => {
          console.log(err)
        })
    },
    YYXX (item) {
      const currentTimeStamp = moment().unix()
      const min = BigInt("1" + "0".repeat(18)) // 10^18
      const max = BigInt("1" + "0".repeat(19)) // 10^19
      const randomNum = min + BigInt(Math.floor(Math.random() * Number(max - min)))
      let itemXX = {
        SBBT: this.title,
        orderNumber: currentTimeStamp + randomNum.toString(), // 预约编号
        siteId: this.siteData.id,
        goodInfo: [
          {
            id: item.id,
            requestQty: 1
          }
        ],
        orderProject: this.title, // 预约项目
        orderProjectType: "1", // 0:   1:  (区分健康自测类型与其他类型)
        orderCreationTime: moment().format("YYYY-MM-DD"), // 下单时间
        estimateArrivalTime: "", // 预计上门时间
        estimateSumPrice: "", // 预估费用
        orderSubType: this.title, // 预约类型
        serviceDescription: "", // 服务介绍
        orderLocation: "", // 预约地址(非空展示)
        serviceTip: "", // 温馨提示(非空展示)
        goodSumPrice: "", // 总价
        serviceTitleList: ["", "", "", ""], // 服务标题
        goodList: [
          {
            goodId: item.goodId,
            goodName: "",
            servicePrice: "",
            serviceQty: "",
            goodCountPrice: "",
            serviceProjectName: item.goodName,
            serviceProjectNameTitle: "物品名称：",
            remark: item.goodDescription,
            remarkTitle: "物品描述：",
            serviceMessage: item.remark,
            serviceMessageTitle: "领取地点："
          }
        ]
      }
      // let li = encodeURIComponent(JSON.stringify(itemXX))
      // uni.navigateTo({
      // 	url: `/pages/SXT/faceImg?YYXQxx=` + li
      // })
      //绘制打印信息
       getAccessToken(itemXX, this.title)
    },
    getNowTimeDate () {
      let now = new Date()
      let year = now.getFullYear()
      let month = String(now.getMonth() + 1).padStart(2, "0")
      let day = String(now.getDate()).padStart(2, "0")
      let hours = ("0" + now.getHours()).slice(-2)
      let minutes = ("0" + now.getMinutes()).slice(-2)
      let seconds = ("0" + now.getSeconds()).slice(-2)
      this.dataInfo.nowTime = hours + ":" + minutes + ":" + seconds
      this.dataInfo.nowDate = year + "年" + month + "月" + day + "日"
    },
    onRefresh () {
      //   list.value = [];
      this.pageData.pageNumber = 1
      this.pageData.pageSize = 10
      this.finished = false
      this.error = false
      this.loading = true
      this.refreshing = true
      this.queryList()
    },
    retryLoad () {
      this.error = false
      this.loading = true
      this.queryList()
    }
  },
  mounted () {
    testUserMessage('基本急救').then((siteData) => {
      this.siteData = siteData[0]
      this.queryList()
    })
  }
}
</script>

<style scoped lang="less">
@import "../../static/css/index.less";
.ulbox {
  padding: 0 20px;
  overflow: auto;
  .ul {
    margin: 14px 0;
    padding: 0 5px;
    box-sizing: border-box;
    background-color: #ffffff;
    border-radius: 10px;

    .title {
      font-size: 14px;
      font-weight: 700;
      margin: 5px 0;
    }

    .text {
      font-size: 12px;
      line-height: 14px;
      margin-top: 5px;
      color: #606266;
    }
    padding-top: 10px;

    .li {
      display: flex;
      flex-direction: column;
      border-radius: 10px;
      width: 100%;
      .li_head {
        display: flex;
        .li_left {
          width: 100px;
          height: 100%;
          padding: 5px;
          img {
            width: 85px;
            height: 90px;
            border-radius: 5px;
          }
        }
        .li_right {
          width: 100%;
          font-size: 14px;
          padding: 5px;
          height: 100%;
          .content {
            margin: 5px 0 10px 0;
            color: #9e9e9e;
            line-height: 25px;
          }

          .li_right__num {
            position: absolute;
            top: 50%;
            right: 10px;
            transform: translateY(-50%);
            font-size: 16px;
          }
          .input {
            line-height: 30px;
          }
          .TT {
            color: #36c2a8;
            font-size: 16px;
            line-height: 14px;
            font-weight: 500;
            width: 100%;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .JJ {
            display: -webkit-box;
            font-size: 11px;
            line-height: 14px;
            letter-spacing: 2px;
            height: 42px;
            width: 100%;
            margin: 5px 0;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #979797;
          }
        }
      }
      .li_foot {
        height: 50px;
        display: flex;
        flex-direction: row-reverse;
        .li_right_btn {
          border: 1px solid #36c2a8;
          color: #36c2a8;
          border-radius: 10px;
          font-size: 12px;
          width: 70px;
          height: 30px;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }
}
</style>
